{% extends "base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
	<div class="jumbotron">
		<div class="container">
			<h1 id="user-id" user-id="{{ user.id }}">{{ user.name }}</h1>

			{% if user.team_id %}
				<h2 id="user-team-id" user-team-id="{{ user.team_id }}">
					<a href="{{ url_for('teams.private') }}">
						<span class="badge badge-secondary">
							{{ user.team.name }}
						</span>
					</a>
				</h2>
			{% endif %}

			{% if user.oauth_id %}
				<a href="https://majorleaguecyber.org/u/{{ user.name }}">
					<h3><span class="badge badge-primary">Official</span></h3>
				</a>
			{% endif %}

			{% if user.affiliation %}
				<h3 class="d-inline-block">
					<span class="badge badge-primary">{{ user.affiliation }}</span>
				</h3>
			{% endif %}

			{% if user.country %}
				<h3 class="d-inline-block">
					<span class="badge badge-primary">
						<i class="flag-{{ user.country.lower() }}"></i>
						{{ lookup_country_code(user.country) }}
					</span>
				</h3>
			{% endif %}

			{% if user.team_id %}
				<div class="user-team-info">
					<h2 id="user-team-place" class="text-center">
						{# This intentionally hides the user's place because this can be their internal profile. #}
						{# Public page hiding is done at the route level #}
						{% if scores_visible() and user.team.place %}
							{{ user.team.place }} <small>place</small>
						{% endif %}
					</h2>
					<h2 id="user-team-score" class="text-center">
						{{ user.team.score }} <small>points</small>
					</h2>
				</div>
			{% else %}
				<div class="user-info">
					<h2 id="user-place" class="text-center">
						{# This intentionally hides the user's place because this can be their internal profile. #}
						{# Public page hiding is done at the route level #}
						{% if scores_visible() and user.place %}
							{{ user.place }} <small>place</small>
						{% endif %}
					</h2>
					<h2 id="user-score" class="text-center">
						{% if score %}
							{{ user.score }}
							<small>points</small>
						{% endif %}
					</h2>
				</div>
			{% endif %}

			<div class="pt-3">
				{% if user.website and (user.website.startswith('http://') or user.website.startswith('https://')) %}
					<a href="{{ user.website }}" target="_blank" style="color: inherit;">
						<i class="fas fa-external-link-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
						   title="{{ user.website }}"></i>
					</a>
				{% endif %}
			</div>
		</div>
	</div>
	<div class="container">
		{% if errors %}
			<div id='errors' class="row">
				{% for error in errors %}
					<h1>{{ error }}</h1>
				{% endfor %}
			</div>
		{% else %}

			{% if score_frozen %}
				<div class="row">
					<h1 class="text-center">Scoreboard has been frozen.</h1>
				</div>
			{% endif %}

			<br>

			{% set solves = user.solves %}
			{% set awards = user.awards %}

			{% if solves %}
				<div id="keys-pie-graph" class="w-50 mr-0 pr-0 float-left d-none d-md-block d-lg-block">
					<div class="text-center">
						<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
					</div>
				</div>
				<div id="categories-pie-graph" class="w-50 mr-0 pr-0 float-left d-none d-md-block d-lg-block">
					<div class="text-center">
						<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
					</div>
				</div>
				<br class="clearfix">
				<div id="score-graph" class="w-100 float-right d-none d-md-block d-lg-block">
					<div class="text-center">
						<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
					</div>
				</div>

				<div class="clearfix"></div>

				{% if awards %}
					<div class="row">
						<div class="col-md-12">
							<h3>Awards</h3>
						</div>
						{% for award in awards %}
							<div class="col-md-3 col-sm-6">
								<p class="text-center">
									<i class="award-icon award-{{ award.icon }} fa-2x"></i>
									<br>
									<strong>{{ award.name }}</strong>
								</p>
								{% if award.category %}<p class="text-center">{{ award.category }}</p>{% endif %}
								{% if award.description %}<p class="text-center">{{ award.description }}</p>{% endif %}
								<p class="text-center">{{ award.value }}</p>
							</div>
						{% endfor %}
					</div>

					<br>
				{% endif %}

				<div class="row">
					<div class="col-md-12">
						<h3>Solves</h3>
						<table class="table table-striped">
							<thead>
							<tr>
								<td><b>Challenge</b></td>
								<td class="d-none d-md-block d-lg-block"><b>Category</b></td>
								<td><b>Value</b></td>
								<td><b>Time</b></td>
							</tr>
							</thead>
							<tbody>
							{% for solve in solves %}
								<tr>
									<td>
										<a href="{{ url_for('challenges.listing') }}#{{ solve.challenge.name }}">{{ solve.challenge.name }}</a>
									</td>
									<td class="d-none d-md-block d-lg-block">{{ solve.challenge.category }}</td>
									<td>{{ solve.challenge.value }}</td>
									<td class="solve-time">
										<span data-time="{{ solve.date | isoformat }}"></span>
									</td>
								</tr>
							{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
			{% else %}
				<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
			{% endif %}
		{% endif %}
	</div>
{% endblock %}

{% block scripts %}
	<script>
		var stats_data = {{ {
			'type': 'user',
			'id': user.id,
			'name': user.name,
			'account_id': 'me' if user.id == id else user.id,
		} | tojson }};
	</script>
	<script defer src="{{ url_for('views.themes', path='js/plotly.bundle.js') }}"></script>
	<script defer src="{{ url_for('views.themes', path='js/graphs.js') }}"></script>
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', path='js/pages/stats.js') }}"></script>
{% endblock %}
